import styled from "styled-components";
import React, { useCallback, useEffect, useState } from 'react';
import { Box,Button } from '@mui/material';
import { useRouter } from 'next/router';

export const Svg = styled.div`
 // background-color: red;
  // height: 20px;
  // width: 20px;
  mask: ${({ src }) => `url(${src}) no-repeat `};
  mask-size: 100% auto;
`;


export const MenuPro = ({color1,bgColor,bgColor1})=>{
    return {
        PaperProps:{
            sx:{
                backgroundColor: bgColor,
                boxShadow: '0px 4px 8px' + color1 +"!important",

                "& .MuiMenuItem-root:hover":{
                    background:bgColor1+'80 '+"!important",
                },
                "& .MuiMenuItem-root.Mui-selected":{
                    background:bgColor1+"!important",
                },
            }
        }
    }
}

export const toLandingPage = (router,hostname:string=null)=>{

    if (hostname?.includes('dev')) {
        router.push( 'https://dev.omnix.finance');
    } else {
        router.push( 'https://omnix.finance/');
    }
    // const router = useRouter();
    // router.push('http://104.250.41.6:3038/');
}